<!-- 参考文档 https://pure-admin.github.io/vue-pure-admin/#/table/index -->
<script setup lang="ts">
import { clone, delay } from "@pureadmin/utils";
import { ref, onMounted, reactive, watch } from "vue";
import type { PaginationProps } from "@pureadmin/table";
import { tableProps } from "../../components/interface";

const props = withDefaults(defineProps<tableProps>(), {
  tableData: () => [], // 传入tableData数据
  columns: () => [], // 表格样式，采用tsx语法
  pagination: () => ({}), // 在基础分页配置上追加或修改分页配置
  onPagination: true // 是否启用分页
});

/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: 0,
  align: "right",
  background: true,
  small: false,
  ...props.pagination
});

const dataList = ref([]);
onMounted(() => {
  delay(600).then(() => {
    const newList = clone(props.tableData, true);
    newList.flat(Infinity).forEach((item, index) => {
      dataList.value.push({ id: index, ...item });
    });
    pagination.total = dataList.value.length;
  });
});

watch(props, () => {
  dataList.value = [];
  const newList = clone(props.tableData, true);
  newList.flat(Infinity).forEach((item, index) => {
    dataList.value.push({ id: index, ...item });
  });
  pagination.total = dataList.value.length;
});

// const dataList = computed(
//   () => {
//     const ret_list = ref([])
//     const newList = clone(props.tableData, true);
//     newList.flat(Infinity).forEach((item, index) => {
//       ret_list.value.push({ id: index, ...item });
//     });
//       pagination.total = ret_list.value.length;
//     return ret_list
//   }
// )

const emit = defineEmits(["clickbtn1", "clickbtn2"]);
const clickbtn1 = (row, index) => {
  emit("clickbtn1", { data: "查看", row, index });
};
const clickbtn2 = (row, index) => {
  emit("clickbtn2", { data: "删除", row, index });
};
</script>

<template>
  <pure-table
    border
    row-key="id"
    alignWhole="center"
    showOverflowTooltip
    :data="
      props.onPagination
        ? dataList.slice(
            (pagination.currentPage - 1) * pagination.pageSize,
            pagination.currentPage * pagination.pageSize
          )
        : dataList
    "
    :columns="props.columns"
    :pagination="props.onPagination ? pagination : {}"
  >
    <template #operation="{ row, index }">
      <div>
        <el-button
          class="reset-margin"
          link
          type="primary"
          @click="clickbtn1(row, index)"
        >
          查看
        </el-button>
        <!-- <el-button
          class="reset-margin"
          link
          type="primary"
          @click="clickbtn2(row, index)"
          >删除</el-button
        > -->
      </div>
    </template>
  </pure-table>
</template>
<style lang="scss" scoped>
:deep(.el-table .cell.el-tooltip) {
  white-space: wrap !important;
}
</style>
